<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { TeacherItem } from '@/types/teacher.d.ts'
import { getTeacherDetailAPI, updateTeacherAPI } from '@/pagesOrgan/services/teacher'
import CustomNavbar from '@/pages/index/components/CustomNavbar.vue'
import { config } from '@/global'

const isEmploymentList = ref([
  {
    text: '在职',
    value: 'Y',
  },
  {
    text: '离职',
    value: 'N',
  },
])

// 表单数据
const formData = ref<Partial<TeacherItem>>({})
// 教师ID
const teacherId = ref<number>(0)
// 加载状态
const isLoading = ref(true)

// 获取教师详情
const getTeacherDetail = async () => {
  try {
    const res = await getTeacherDetailAPI(teacherId.value)
    formData.value = res.data
  } catch (error) {
    console.error('获取教师详情失败:', error)
    uni.showToast({ title: '获取教师详情失败', icon: 'none' })
  } finally {
    isLoading.value = false
  }
}

// 提交表单
const submitForm = async () => {
  // 表单验证
  if (!formData.value.teacherName) {
    uni.showToast({ title: '请输入教师姓名', icon: 'none' })
    return
  }
  if (!formData.value.teacherPhone) {
    uni.showToast({ title: '请输入联系电话', icon: 'none' })
    return
  }
  if (formData.value.isEmployment === '0' && !formData.value.resignationTime) {
    uni.showToast({ title: '请选择离职时间', icon: 'none' })
    return
  }

  try {
    await updateTeacherAPI(teacherId.value, formData.value)
    uni.showToast({ title: '更新成功' })
    // 返回列表页
    uni.navigateBack()
    // 通过事件总线通知上一页刷新数据
    uni.$emit('refreshTeacherList')
  } catch (error) {
    console.error('更新教师失败:', error)
    uni.showToast({ title: '更新教师失败', icon: 'none' })
  }
}

// 监听在职状态变化
watch(
  () => formData.value.isEmployment,
  (newVal) => {
    if (newVal === 'Y') {
      formData.value.resignationTime = ''
    }
  },
)

onLoad((options: any) => {
  // 首次加载数据
  teacherId.value = Number(options.id)
  getTeacherDetail()
})
</script>

<template>
  <view class="teacher-form">
    <scroll-view class="form-container" :scroll-y="true" v-if="!isLoading">
      <!-- 姓名 -->
      <view class="form-item">
        <text class="form-label">姓名</text>
        <input
          type="text"
          v-model="formData.teacherName"
          placeholder="请输入教师姓名"
          class="form-input"
        />
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <text class="form-label">性别</text>
        <view class="radio-group">
          <uni-data-checkbox v-model="formData.gender" :localdata="config.genderList" />
        </view>
      </view>

      <!-- 电话 -->
      <view class="form-item">
        <text class="form-label">电话</text>
        <input
          type="number"
          v-model="formData.teacherPhone"
          placeholder="请输入联系电话"
          class="form-input"
        />
      </view>

      <!-- 是否在职 -->
      <view class="form-item">
        <text class="form-label">是否在职</text>
        <view class="radio-group">
          <uni-data-checkbox v-model="formData.isEmployment" :localdata="isEmploymentList" />
        </view>
      </view>

      <!-- 离职时间 -->
      <view class="form-item" v-if="formData.isEmployment === 'N'">
        <text class="form-label">离职时间</text>
        <uni-datetime-picker
          type="date"
          v-model="formData.resignationTime"
          placeholder="选择离职时间"
        />
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" @click="submitForm">保存修改</view>
    </scroll-view>

    <!-- 加载中 -->
    <view class="loading-state" v-if="isLoading">
      <uni-load-more type="spin" size="large" text="加载中..."></uni-load-more>
    </view>
  </view>
</template>

<style lang="scss">
.teacher-form {
  padding-top: var(--custom-navbar-height);
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .form-container {
    padding: 20rpx;
    height: calc(100vh - var(--custom-navbar-height));
    box-sizing: border-box;

    .form-item {
      margin-bottom: 30rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 8rpx;

      .form-label {
        display: block;
        margin-bottom: 16rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }

      .form-input {
        width: 100%;
        height: 70rpx;
        padding: 0 16rpx;
        font-size: 28rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 6rpx;
        box-sizing: border-box;
      }

      .form-textarea {
        width: 100%;
        height: 200rpx;
        padding: 16rpx;
        font-size: 28rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 6rpx;
        box-sizing: border-box;
        resize: none;
      }

      .avatar-upload {
        display: flex;
        align-items: center;

        .avatar-preview {
          width: 140rpx;
          height: 140rpx;
          border-radius: 50%;
          margin-right: 30rpx;
        }

        .upload-btn {
          padding: 16rpx 30rpx;
          font-size: 28rpx;
          color: #409eff;
          background-color: rgba(64, 158, 255, 0.1);
          border-radius: 6rpx;
        }
      }

      .radio-group {
        display: flex;
        gap: 40rpx;
        padding: 10rpx 0;

        radio {
          font-size: 28rpx;
          color: #333;
          margin-right: 8rpx;
        }
      }
    }

    .submit-btn {
      margin-top: 40rpx;
      padding: 20rpx;
      font-size: 32rpx;
      color: #fff;
      background-color: #409eff;
      border-radius: 6rpx;
      text-align: center;
    }
  }

  .loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - var(--custom-navbar-height));
  }
}
</style>
